import { mapGetters, mapMutations } from "vuex";
import "./index.scss";
import { firstMenu } from "@/cool/modules/base/utils";
import _ from "lodash";

export default {
	name: "cl-menu-slider",
	inject: ["$layout"],
	data() {
		return {
			visible: true,
			index: "-1"
		};
	},

	computed: {
		...mapGetters(["menuList", "menuIndex", "menuCollapse", "browser", "app", "menuGroup"])
	},

	watch: {
		// menuList() {
		// 	this.refresh();
		// },
		"app.conf.showAMenu"() {
			this.refresh();
			this.SET_MENU_LIST();
			this.init();
		},
		"$route.path"(v) {
			// console.log("route", v);
			const { showAMenu } = this.app.conf;
			console.log(v);
			// this.SET_MENU_LIST();
			if (v === "/" && showAMenu) {
				this.index = "-1";
				this.refresh();
			}
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		...mapMutations(["SET_MENU_LIST"]),
		init() {
			const { showAMenu } = this.app.conf;
			if (!showAMenu) return;
			// this.menuList.forEach((e, i) => {
			// 	if (this.$route.path.includes(e.path)) {
			// 		this.index = String(i);
			// 		this.SET_MENU_LIST(i);
			// 	}
			// });
			const deep = item => {
				if (this.$route.path === "/") {
					return false;
				}

				if (item.path == this.$route.path) {
					return item;
				} else {
					if (item.children) {
						const ret = item.children.map(deep).find(Boolean);
						if (ret) {
							return [item, ret];
						} else {
							return false;
						}
					} else {
						return false;
					}
				}
			};
			let list = _(this.menuGroup)
				.map(deep)
				.filter(Boolean)
				.flattenDeep()
				.value();
			if (list.length) {
				let curr = list[0];
				let index = _.findIndex(this.menuGroup, { id: curr.id });
				this.index = index + "";
				this.SET_MENU_LIST(index);
			}
		},
		onSelect(index) {
			this.SET_MENU_LIST(index);
			const url = firstMenu(this.menuGroup[index].children);
			console.log(url);
			this.$router.push(url);
		},
		toView(url) {
			// if (url.includes("/shop/search")) {
			// 	// console.log(url);
			// 	this.$layout.openCusSearch();
			// 	return;
			// }
			if (url != this.$route.path) {
				this.$router.push(url);
			}
		},

		refresh() {
			this.visible = false;
			setTimeout(() => {
				this.visible = true;
			}, 0);
		},
		renderMenu({ name, icon }) {
			const vnodes = [];
			let ignore = ["icon"];
			if (icon && !ignore.includes(icon)) {
				if (icon.includes("el-icon")) {
					// vnodes.push(<i class={[icon, "sub-el-icon"]} />);
				} else {
					vnodes.push(<icon-svg name={icon} />);
				}
			}
			if (name) {
				vnodes.push(<span slot="title">{name}</span>);
			}
			return vnodes;
		},
		getMenus() {
			const { showAMenu } = this.app.conf;
      
			const isSearch = path => {
				return /^(\/home\/cus\/shop\/search)/.test(path);
			};
			const fn = list => {
				if (showAMenu) {
					return this.menuGroup
						.filter(e => e.isShow)
						.map((e, i) => {
							return (
								<el-menu-item index={`${i}`} key={i}>
									{this.renderMenu(e)}
								</el-menu-item>
							);
						});
				}
				return list
					.filter(e => e.isShow)
					.map(e => {
						if (e.type == 0) {
							return (
								<el-submenu
									popper-class="cl-slider-menu__submenu"
									index={String(e.id)}
									key={e.id}>
									<template slot="title">{this.renderMenu(e)}</template>
									{fn(e.children)}
								</el-submenu>
							);
						}
						if (isSearch(e.path)) {
							return (
								<div class="menu-event" onClick={() => this.toView(e.path)}>
									<el-menu-item index={e.path} key={e.path} disabled>
										{this.renderMenu(e)}
									</el-menu-item>
								</div>
							);
						}

						return (
							<el-menu-item index={e.path} key={e.path}>
								{this.renderMenu(e)}
							</el-menu-item>
						);
					});
			};
			return fn(this.menuList);
		}
	},

	render() {
		const { showAMenu } = this.app.conf;
		const { menuIndex } = this;
		return (
			<div class="cl-slider-menu">
				<el-menu
					key={String(this.visible)}
					default-active={showAMenu ? `${menuIndex}` : this.$route.path}
					background-color="transparent"
					collapse-transition={false}
					collapse={this.browser.isMobile ? false : this.menuCollapse}
					on-select={showAMenu ? this.onSelect : this.toView}>
					{this.getMenus()}
				</el-menu>
			</div>
		);
	}
};
